<template>
  <!-- 研究成果 -->
  <div class="research-result">
    <div class="search-box">
      <!-- 专利类型 -->
      <el-select v-model="value1" class="elselect" @change="changeValue1" size="medium" placeholder="成果类型">
        <el-option
          v-for="item in options1"
          :key="item.key"
          :label="item.key"
          :value="item.key">
        </el-option>
      </el-select>
      <!-- 时间 -->
      <div class="date">
        <el-select v-model="value2" class="elselect" @change="changeValue2" size="medium" placeholder="时间">
          <el-option
            v-for="item in options2"
            :key="item.key_as_string"
            :label="`${item.key_as_string}`"
            :value="item.key_as_string">
          </el-option>
        </el-select>
      </div>
    </div>
    <ul class="list">
      <li v-for="(item, index) in listData" :key="index">
        <i class="circle"></i>
        <div class="panel">
          <h4>{{item.ad}}</h4>
          <div class="box">
            <h3>
              <span class="tit" @click="toDetails(item.pn)">{{item.title}}</span>
              <span class="tag status1" :class="{status2: item.legal_status === '驳回' || item.legal_status === '失效' || item.legal_status === '撤回'}">{{item.legal_status}}</span>
            </h3>
            <p class="patent-number"><span class="tit">专利号：</span>{{item.pn}}</p>
            <template v-if="item.abst==='加载中'">
              <p class="abs"><i class="el-icon-loading"></i>{{item.abst}}</p>
            </template>
            <template v-else>
              <p class="abs">{{(item.abst && item.abst.length > 150 && !item.toggle) ? item.abst.substr(0, 150) + '...' : item.abst}}</p>
              <span v-if="item.abst && item.abst.length > 150" class="toggle" @click="toggleAbs(item)">{{item.toggle ? '收起' : '展开'}}</span>
            </template>
          </div>
        </div>
      </li>
      <li v-if="listData.length<=0">
        {{noData}}
      </li>
    </ul>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="ips"
        :current-page.sync="ipi"
        @current-change="getCurrentPage"
        class="el-pagination">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      listData: [],
      // 专利类型
      value1: '',
      options1: [],
      // 公开日
      value2: '',
      options2: [],
      ipi: 1,
      ips: 5,
      total: 0,
      noData: '加载中...'
    }
  },
  methods: {
    init() {
      this.getPatentType()
      this.getIsd()
    },
    // 专利类型聚类
    getPatentType() {
      this.$post(this.$Url.team.patentAnalysis, {
        musts: {
          date_sort: '1',
          'in2id.id': this.info.key
        },
        aggs: {
          type: 'base',
          field: 'patent_type'
        }
      }).then(res => {
        let data = res.data
        data = [
          {
            key: '全部',
          },
          ...data
        ]
        this.options1 = data
      }).catch(err => {})
    },
    // 公开日聚类
    getIsd() {
      this.$post(this.$Url.team.patentAnalysis, {
        musts: {
          date_sort: '1',
          'in2id.id': this.info.key
        },
        aggs: {
          interval: 'YEAR',
          format: 'yyyy',
          field: 'ad',
          type: 'date'
        }
      }).then(res => {
        let data = res.data
        let newData = []
        data.forEach(v => {
          if (v.doc_count > 0) {
            newData.push(v)
          }
        })
        newData = [
          {
            key_as_string: '全部',
          },
          ...newData
        ]
        this.options2 = newData
      }).catch(err => {})
    },
    getData() {
      let ths = this
      let param = {
        musts: {
          date_sort: '1',
          'in2id.id': this.info.key
        },
        ipi: this.ipi,
        ips: this.ips,
        sort: [
          {
            ad: 'desc'
          }
        ]
      }

      if (this.value1 !== '' && this.value1 !== '全部') {
        param['musts']['patent_type'] = this.value1
      }

      if (this.value2 !== '' && this.value2 !== '全部') {
        let start = this.value2 + '-01-01'
        let end = this.value2 + '-12-31'
        param['rangArr'] = [
          {
            start,
            end,
            field: 'ad'
          }
        ]
      }

      this.noData = '加载中...'

      this.$post(this.$Url.team.patentSearch2, param).then(res => {
        let data = res.data
        let listData = data && data.result
        if (listData.length > 0) {
          listData.forEach((v, i) => {
            v.toggle = false
            v.abst = '加载中...'
            if (v.legal_status === '') {
              v.legal_status = '其它'
            }
            v.cancel = null
          })
          this.listData = listData
          this.listData.forEach((v, i) => {
            ths.getAbst(v.pn, v.cancel, (abst) => {
              ths.$set(ths.listData[i], 'abst', abst)
            })
          })
          // this.listData = result
          this.total = data.page.totalRow
        } else {
          this.listData = []
          this.total = 0
          this.noData = '暂无数据'
        }
      }).catch(err => {})
    },
    // 获取摘要
    getAbst(pn, cancel, fn) {
      if (cancel) {
        cancel()
      }
      this.$post(this.$Url.patent.basicInfo,{
        sf: "QueryFulltext",
        istype: "1",
        ialist: "1",
        sx: "cn/queryfulltext_cn",
        iclient: "1",
        isClick: 1,
        foo: "SEARCH-MASTER",
        sl: "chs",
        itrans: "1",
        fooShowPN: "null",
        ispage: "100",
        advanceSearchHistory: "false",
        idi: "274766528119",
        sq: `apn/${pn} or pns/${pn}`,
        sqtype: "1",
        ishowAbst: 1
      }, {
        cancelToken: new axios.CancelToken(function executor(c) {
          cancel = c
        })
      }).then(res => {
        let data = res.data
        if (data.PatentList) {
          let abst = res.data.PatentList[0].abst || '暂无'
          fn && fn(abst)
        }
      }).catch(err => {})
    },
    toDetails(pn) {
      this.$router.push({
        name: 'TechnicalValuationDetail',
        query: {
          pn,
          active: 1
        }
      })
    },
    changeValue1(val) {
      this.ipi = 1
      this.getData()
    },
    changeValue2(val) {
      this.ipi = 1
      this.getData()
    },
    toggleAbs(item) {
      item.toggle = !item.toggle
    },
    getCurrentPage(val) {
      this.ipi = val
      this.getData()
    },
  },
  watch: {
    info(newVal, oldVal) {
      if (newVal.key !== oldVal.key) {
        this.init()
        this.getData()
      }
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.listData.length > 0) {
      this.listData.forEach(v => {
        if (v.cancel) {
          v.cancel()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  padding: 0 24px;
  margin-top: 10px;
  margin-bottom: 40px;
  .elselect {
    width: 142px;
    margin-right: 30px;
  }
  .date {
    display: inline-flex;
    align-items: center;
    .split {
      display: inline-block;
      padding: 0 5px;
    }
  }
}
.list {
  position: relative;
  padding-left: 0;
  margin-left: 40px;
  margin-right: 30px;
  list-style: none;
  li {
    position: relative;
    padding-left: 36px;
    padding-bottom: 40px;
    border-left: 1px solid #65c6f5;
    &:last-of-type {
      padding-bottom: 0;
    }
    .circle {
      position: absolute;
      top: 0;
      left: -5px;
      display: block;
      width: 10px;
      height: 30px;
      background-color: #fff;
      &:before {
        position: absolute;
        top: 10px;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #65c6f5;
        content: '';
      }
    }
    .panel {
      position: relative;
      h4 {
        line-height: 30px;
        margin-bottom: 20px;
        font-size: 16px;
        color: #241c75;
      }
      .box {
        padding: 26px 30px;
        background-color: #f7f9fc;
        h3 {
          margin-bottom: 16px;
          .tit {
            font-size: 16px;
            color: #241c75;
            cursor: pointer;
          }
          .tag {
            float: right;
            line-height: 28px;
            padding: 0 15px;
            border-radius: 4px;
            font-weight: normal;
            font-size: 14px;
            color: #fff;
            &.status1 {
              background-color: #41b3a2;
            }
            &.status2 {
              background-color: #c44b5c !important;
            }
          }
        }
        .patent-number {
          font-size: 14px;
          color: #7674a3;
          .tit {
            display: inline-block;
            width: 65px;
            color: #241c75;
          }
        }
        .abs {
          margin-bottom: 24px;
          font-size: 14px;
          color: #7674a3;
        }
        .toggle {
          color: #6f6dd8;
          &:hover {
            opacity: .8;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.pagination {
  margin: 31px 0;
  text-align: center;
}
</style>